<!doctype html> <!-- Important: must specify -->
<html>
<head>
  <title>RapiDoc API Demo</title>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-132775238-1');
  </script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <link rel="icon" type="image/png" href="../images/logo-outline.svg" sizes="32x32" />
  <meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 characters -->
  <style>
    /* couresty https://github.com/chandrakanthbalaraman */
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    #rapiddoc-container {
      transition: margin-right 100ms ease-in;
    }

    .rapiddoc-container--push {
      margin-right: 300px;
    }

    #sidebar {
      font-family: 'Open Sans', sans-serif;
      background-color: #181c32;
      width: 300px;
      height: 100vh;
      padding: 0;
      right: 0;
      position: fixed;
      transition: transform 200ms ease-in;
      z-index: 9999;
    }

    .sidebar--isHidden {
      transform: translateX(100%);
      transition: transform 200ms ease-out !important;
    }

    #sidebar .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      min-height: 70px;
      padding: 0 20px 0 20px;
    }

    #sidebar .section-header .section-title {
      font-size: 18px !important;
      color: #ffffff;
      font-weight: 600 !important;
      margin: 0 !important;
    }

    .section-header-actions a {
      color: #d6d6e5;
      font-size: 14px;
      margin-right: 8px;
    }

    .section-body {
      padding: 10px 20px;
      height: calc(100% - 69px);
      overflow-y: auto;
    }

    .option-label {
      color: #ffffff;
      margin-top: 5px;
      margin-bottom: 2px !important;
    }

    .option-tip {
      color: #ccc;
      font-size: 12px;
    }

    .close-btn {
      all: unset;
      font-size: 24px;
      font-weight: 600;
      padding: 0px 8px;
      color: white;
      cursor: pointer;
      position: absolute;
      left: -38px;
      width: 19px;
      height: 36px;
      background-color: rgb(24 28 50);
      display: flex;
      align-items: center;
      justify-content: center;
    }


    label input[type="checkbox"],
    input[type="radio"]+span {
      color: white;
      font-size: 14px;
    }
  </style>
  <script type="module" src="../rapidoc-min.js"></script>
  <script>
    const specUrls = {
      'PetStore'  : 'https://petstore.swagger.io/v2/swagger.json',
      'Jira'      : 'https://api.apis.guru/v2/specs/atlassian.com/jira/1001.0.0-SNAPSHOT/openapi.yaml',
      'YouTube'   : 'https://api.apis.guru/v2/specs/googleapis.com/youtube/v3/openapi.yaml',
      'AzureAD'   : 'https://api.apis.guru/v2/specs/azure.com/azureactivedirectory/2017-04-01/swagger.yaml',
      'Gitlab'    : 'https://api.apis.guru/v2/specs/gitlab.com/v3/swagger.yaml',
      'TheySaidSo': 'https://api.apis.guru/v2/specs/quotes.rest/3.1/openapi.yaml',
      'API2Cart'  : 'https://api.apis.guru/v2/specs/api2cart.com/1.1/openapi.yaml',
      'Chomp'     : 'https://api.apis.guru/v2/specs/chompthis.com/1.0.0-oas3/openapi.yaml'
    };

    const primaryColors = ['#2D87E2','#34A853','#3B5998','#66757F','#7B0099','#7CBB00','#8B9DC3','#FBBC05','#FF3D00','#FF6961','#FF9900','#F0F0F0'];
    const options = [ // order of items control the order of appearance in the options sidebar
      { attr: 'theme'                           , default: 1, values: ['dark','light']                                      , label: 'Theme'                                , tip: ''                                              },
      { attr: 'show-header'                     , default: 0, values: ['true','false']                                      , label: 'Show Header'                          , tip: ''                                              },
      { attr: 'allow-spec-url-load'             , default: 0, values: ['true','false']                                      , label: 'Show Spec URL Load'                   , tip: ''                                              },
      { attr: 'allow-spec-file-load'            , default: 0, values: ['true','false']                                      , label: 'Show Spec File Load'                  , tip: ''                                              },
      { attr: 'spec-url'                        , default: 3, values: Object.keys(specUrls)                                 , label: 'OpenAPI Specs'                        , tip: '(Dynamically change logo and header text)'                                              },
      { attr: 'font-size'                       , default: 1, values: ['default','large','largest']                         , label: 'Font Size'                            , tip: ''                                              },
      { attr: 'regular-font'                    , default: 0, values: ['Open Sans','Courier New','Nunino']                  , label: 'Font'                                 , tip: ''                                              },
      { attr: 'render-style'                    , default: 2, values: ['view','read','focused']                             , label: 'Display Mode'                         , tip: ''                                              },
      { attr: 'primary-color'                   , default: 1, values: primaryColors                                         , label: 'Change Primary Color'                 , tip: ''                                              },
      { attr: 'nav-item-spacing'                , default: 0, values: ['compact','default','relaxed']                       , label: 'Nav Spacing'                          , tip: ''                                              },
      { attr: 'nav-active-item-marker'          , default: 1, values: ['left-bar','colored-block']                          , label: 'Highlight selected Nav Item'          , tip: '(Select an Endpoint after changing)'           },
      { attr: 'show-info'                       , default: 0, values: ['true','false']                                      , label: 'Show Info Section'                    , tip: ''                                              },
      { attr: 'allow-authentication'            , default: 0, values: ['true','false']                                      , label: 'Show Auth Section'                    , tip: ''                                              },
      { attr: 'persist-auth'                    , default: 1, values: ['true','false']                                      , label: 'Store Authentication'                 , tip: '(WARN: Keys will be stored in localStorage)'   },
      { attr: 'allow-search'                    , default: 0, values: ['true','false']                                      , label: 'Show Search'                          , tip: ''                                              },
      { attr: 'allow-advanced-search'           , default: 0, values: ['true','false']                                      , label: 'Show Advanced Search'                 , tip: ''                                              },
      { attr: 'show-components'                 , default: 0, values: ['true','false']                                      , label: 'Show Components'                      , tip: `(Only in 'focus' mode. Security Schemes, Schemas, Responses)` },
      { attr: 'use-path-in-nav-bar'             , default: 1, values: ['true','false']                                      , label: 'Display Endpoint Path'                , tip: '(or Summary)'                                  },
      { attr: 'show-method-in-nav-bar'          , default: 2, values: ['as-plain-text','as-colored-text','as-colored-block'], label: 'Endpoint Method'                      , tip: ''                                              },
      { attr: 'sort-endpoints-by'               , default: 0, values: ['path','method','summary','none']                    , label: 'Sort Endpoints by'                    , tip: `(Not working)`                                 },
      { attr: 'default-schema-tab'              , default: 1, values: ['model','example']                                   , label: 'Default tab to show'                  , tip: ''                                              },
      { attr: 'schema-style'                    , default: 0, values: ['table','tree']                                      , label: 'Schema Style'                         , tip: ''                                              },
      { attr: 'schema-expand-level'             , default: 0, values: ['1','2','9']                                         , label: 'Schema Levels to expand'              , tip: ''                                              },
      { attr: 'schema-hide-read-only'           , default: 0, values: ['default','never']                                   , label: 'Hide read only fields in Request body', tip: ''                                              },
      { attr: 'schema-description-expanded'     , default: 0, values: ['true','false']                                      , label: 'Multiline Schema descriptions'        , tip: ''                                              },
      { attr: 'allow-schema-description-expand-toggle', default: 0, values: ['true','false']                                , label: 'Show Multiline descriptions toggle'   , tip: ''                                              },
      { attr: 'fill-request-fields-with-example', default: 1, values: ['true','false']                                      , label: 'Fill Examples by Default'             , tip: '(Or click on required example to populate it)' },
      { attr: 'layout'                          , default: 0, values: ['row','column']                                      , label: 'ReqRes Layout'                        , tip: `(Only in 'read' mode)`                         },
      { attr: 'allow-try'                       , default: 0, values: ['true','false']                                      , label: 'Allow API Invocaiton'                 , tip: ''                                              },
      { attr: 'show-curl-before-try'            , default: 0, values: ['true','false']                                      , label: 'Always show cURL'                     , tip: '(Display cURL without invoking API)'        },
      { attr: 'response-area-height'            , default: 0, values: ['100px','200px','300px','400px','500px']             , label: 'Response area height'                 , tip: ''                                              },
    ];

    function setAttribute(attr, value) {
      if (attr === 'spec-url') { value = specUrls[value]; }
      rapiDocE.setAttribute(attr, value);
    }
    function updateValue(attr, value) {
      window.localStorage.setItem(attr, value);
      setAttribute(attr, value);
    }

    let rapiDocE;
    let sideBarE;
    document.addEventListener('DOMContentLoaded', (event) => {
      rapiDocE = document.getElementById('thedoc');
      sideBarE = document.getElementById('sidebar');
      rapiDocE.addEventListener('before-render', (e) => { initOptions(false, e.detail.spec); });
      document.addEventListener('click', onOutsideClick);
      toggleSidebar(event);
    });

    function initOptions(reset, specObject) {
      const settingsE = document.getElementById('settings-table');
      settingsE.innerHTML = '';
      for (const option of options) {
        option.isBoolean = (option.values[0] == 'true');
        option.defaultVal = option.values[option.default];
        if (reset) {
          window.localStorage.clear(option.attr);
          option.currentValue = option.defaultVal;
        } else {
          option.currentValue = window.localStorage.getItem(option.attr) ?? option.defaultVal;
        }
        setAttribute(option.attr, option.currentValue);
        settingsE.innerHTML += buildOption(option);
      }
      setAttribute('heading-text', specObject.info.title);
      const logoUrl = specObject.info['x-logo']?.url ?? '../images/logo-outline.svg';
      document.getElementById('logo').setAttribute('src', logoUrl);
      document.getElementById('nav-logo').setAttribute('src', logoUrl);
    }

    function buildOption(option) {
      let optionLabel = `<h5 class="option-label">${option.label}</h5><span class="option-tip">${option.tip}</span>`;

      return (! option.isBoolean) ?
                `<tr>
                  <td colspan="2">${optionLabel}</td>
                </tr>
                <tr style="border-bottom: 1px dashed #323248">
                  <td style="padding-bottom: 5px" colspan="2">${getOptionControl(option)}</td>
                </tr>`
              :
                `<tr style="border-bottom: 1px dashed #323248">
                  <td style="padding-bottom: 5px">${optionLabel}</td>
                  <td style="padding-bottom: 5px">${getOptionControl(option)}</td>
                </tr>`
      ;
    }
    function getOptionControl(option) {
      if (option.isBoolean) {
        return `<label>
                  <input type="checkbox"
                    ${option.currentValue == 'true' ? 'checked' : ''}
                    onchange="updateValue('${option.attr}', event.target.checked)"
                  />
                </label>`;
      }

      let control = '<div style="display: flex; flex-wrap: wrap;">';
      for (const value of option.values) {
        control += `<label style="display: flex; align-items: center; margin-right: 6px; margin-bottom: 6px">
                      <input type="radio"
                        name="${option.attr}_radio"
                        ${option.currentValue == value ? 'checked' : ''}
                        value="${value}"
                        onclick="updateValue('${option.attr}', event.target.value)"
                      />
                      <span style="padding-left: 4px;">${value}</span>
                    </label>`;
      }
      control += '</div>';
      return control;
    }

    function toggleSidebar(event) {
      event.stopPropagation();

      const rapidDocContainerE = document.getElementById('rapiddoc-container');
      rapidDocContainerE.classList.toggle('rapiddoc-container--push');
      sideBarE.classList.toggle('sidebar--isHidden');

      const closeBtnE = document.getElementById('close-btn');
      closeBtnE.innerHTML = sideBarE.classList.contains('sidebar--isHidden') ? '<' : '>';
    }

    function onOutsideClick(event) {
      if (!sideBarE.contains(event.target) && !sideBarE.classList.contains('sidebar--isHidden')) {
        toggleSidebar(event);
      }
    }
  </script>
</head>
<body>
  <div id="sidebar" class="sidebar--isHidden">
    <div class="section-header">
      <h3 class="section-title">Options</h3>
      <div class="section-header-actions">
        <a href="javascript:void(0);" onClick="initOptions(true)">Reset</a>
        <button class="close-btn" id="close-btn" onclick="toggleSidebar(event)"><</button>
      </div>
    </div>
    <div class="section-body" id="settings-container">
      <table id="settings-table" style="border-collapse: collapse"></table>
    </div>
	</div>
  <div id="rapiddoc-container">
    <!-- set attributes not to be customized -->
    <rapi-doc
      spec-url="https://api.apis.guru/v2/specs/azure.com/azureactivedirectory/2017-04-01/swagger.yaml"

      id="thedoc"
      sort-tags="false"
      goto-path="get-/providers/microsoft.aadiam/diagnosticSettings/-name-"
      sort-endpoints-by="method"
      heading-text="ECS API"

      show-header="false"

      default-api-server="https://8wznlhux9c.execute-api.us-east-1.amazonaws.com"
    >
      <img id="logo" slot="logo" width='10%' src="../images/logo-outline.svg"/>
      <img id="nav-logo" slot="nav-logo" src="../images/logo-outline.svg"/>
    </rapi-doc>
  </div>

</body>
</html>
